<template>
  <div>
    <ul class="ul">
      <li class="m-t" v-for="(item, index) in arrList" :key="index">
        <div class="floor">
          <el-descriptions class="margin-top" :column="4" size="small" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                提问人
              </template>
              {{ item.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                提问类型
              </template>
              {{ item.type }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                提问时间
              </template>
              {{ item.createdTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                答复时间
              </template>
              {{ item.answerTime }}
            </el-descriptions-item>
          </el-descriptions>
          <div class="qa_q">
            <div class="list">
              <span class="name">提问标题：</span><span class="text bold">{{ item.title }}</span>
              <div style="clear: both;"></div>
            </div>
            <div class="list">
              <span class="name">提问内容：</span><span class="text">{{item.content}}</span>
              <div style="clear: both;"></div>
            </div>
            <div class="line_top"></div>
            <div class="list">
              <span class="name">答复内容：</span><span class="text">{{item.replyContent}}</span>
              <div style="clear: both;"></div>
            </div>
            <div class="list">
              <span class="name">答复单位：</span><span class="text">{{item.unit}}</span>
              <div style="clear: both;"></div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <pagination v-show="queryParams.total > 0" :total="queryParams.total" :page.sync="queryParams.currentPage" :limit.sync="queryParams.pageSize"
      @pagination="getPagination" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        total: 3,
        currentPage: 1,
        pageSize: 10
      },
      arrList: [
        {
          name: '管理员',
          type: '政策法规',
          createdTime: '2023-07-17 15:35:32',
          answerTime: '2023-07-17',
          title:
            '关于即将生效的《人类遗传资源管理条例实施细则》之“人类遗传资源”及“外方单位”定义',
          content:
            '敬启者： 您好！因注意到《人类遗传资源管理条例实施细则》即将于2023年7月1日生效，但对于“人类遗传资源”及“外方单位”之定义及所涉情形有部分疑问： （1）采集血样是否会涉及到“人类遗传资源”的定义范畴，是完全落入，还是针对于血样所载信息部分落入？ （2）对于外方单位，如果注册在中国的企业，其实控人系持境外绿卡，是否亦将落入“外方单位”的审查范围？对于“外方单位”审查的股权控制比例，是否将需进行穿透审查？ 谢谢！盼复！',
          replyContent:
            '人类遗传资源包括人类遗传资源材料和人类遗传资源信息。人类遗传资源材料是指含有人体基因组、基因等遗传物质的器官、组织、细胞等遗传材料。人类遗传资源信息包括利用人类遗传资源材料产生的人类基因、基因组数据等信息资料。人类遗传资源信息不包括临床数据、影像数据、蛋白质数据和代谢数据。 境外组织、个人设立或者实际控制的机构，包括下列情形： （一）境外组织、个人持有或者间接持有机构百分之五十以上的股份、股权、表决权、财产份额或者其他类似权益； （二）境外组织、个人持有或者间接持有机构的股份、股权、表决权、财产份额或者其他类似权益不足百分之五十，但其所享有的表决权或者其他权益足以对机构的决策、管理等行为进行支配或者施加重大影响； （三）境外组织、个人通过投资关系、协议或者其他安排，足以对机构的决策、管理等行为进行支配或者施加重大影响； （四）法律、行政法规、规章规定的其他情形。',
          unit: '生物中心'
        },
        {
          name: '管理员',
          type: '反馈问题',
          createdTime: '2023-07-17 15:35:32',
          answerTime: '2023-07-17',
          title: '2023年度国家科学技术奖提名工作',
          content:
            '你好，在通知公告里没有找到《关于2023年度国家科学技术奖提名工作的通知》，请问一下2023年度申报国家科学技术奖相关流程和要求是什么，有相关文件吗？',
          replyContent: '您好，目前2023年度国家科学技术奖还未开展提名工作。',
          unit: '奖励办'
        },
        {
          name: '管理员',
          type: '反馈问题',
          createdTime: '2023-07-17 15:35:32',
          answerTime: '2023-07-17',
          title: '科学技术部2023年度部门预算',
          content:
            '科学技术部2023年03月28日发布的2023年度部门预算，pdf首页文件名为科学技术部2023年度部门预算，但是页面左上角为科学技术部2021年度部门预算，望修改',
          replyContent:
            '已在门户网站上更新了文件内容，感谢对科技部工作的支持。',
          unit: '资管司'
        }
      ]
    }
  },
  methods: {
    getPagination() { }
  }
}
</script>

<style lang="less" scoped>
  ::v-deep(.ul) {
    margin-top: 20px;
    li {
      .el-descriptions-item__label.is-bordered-label {
        color: #5272ec;
        font-weight: bold;
      }
      .iconClass {
        color: #5272ec;
        font-size: 30px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #eaf4ff;
        text-align: center;
        line-height: 46px;
      }
      .qa_q {
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-top: none;
        padding: 10px 15px;
        .list {
          display: block;
          margin-bottom: 5px;
          .name {
            float: left;
            // width: 86px;
            display: block;
            font-size: 15px;
            color: #5272ec;
            line-height: 28px;
            font-weight: bold;
          }
          .text {
            display: block;
            float: left;
            width: 90%;
            font-size: 15px;
            line-height: 28px;
            &.bold {
              font-weight: bold;
            }
          }
        }
        .line_top {
          border-top: 1px dashed #5272ec;
          display: block;
          height: 10px;
          margin-top: 10px;
        }
      }
    }
  }
</style>